<template>
  <el-row class="wrap">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{path:'/dashboard'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>链上信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col :span="24" class="wrap-main">
      <el-form size="small" :inline="true">
        <el-form-item label="文件名">
          <el-input v-model="filename" placeholder="请输入文件名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryChain" :disabled="noAuthority">私有链查询</el-button>

        </el-form-item>
        <!-- <el-form-item>
          <el-upload :before-upload="beforeUpload" :action="uploadUrl" :data="uploadData" :headers="uploadHeaders"
                     :on-success="onSuccess">
            <el-button type="primary">上链</el-button>
          </el-upload>
        </el-form-item> -->
      </el-form>
    </el-col>


    <el-dialog
      title="查链结果展示"
      :visible.sync="dialogVisible"
      width="50%" center
      :before-close="handleClose">
      <el-table :data="gridData">
        <el-table-column property="name" label="文件名" width="150"></el-table-column>
        <el-table-column property="size" label="文件大小" width="200"></el-table-column>
        <el-table-column property="uptime" label="上链时间"></el-table-column>
        <el-table-column property="owner" label="上传用户"></el-table-column>
        
      </el-table>
      <span slot="footer" class="dialog-footer">

  </span>
    </el-dialog>

  </el-row>
</template>

<script>

  import API1 from '../../api/api_chain'
  import API_ROLE from '../../api/api_role';
  import API_USER from "../../api/api_user";

  export default {
    name: "List",
    data() {
      return {
        gridData: [{          
          name: '',
          size: '',
          uptime: '',
          owner: ''        
        }],
        number: 0,
        filename: '',
        dialogVisible: false,
        uploadData: {},
        uploadHeaders: {Authorization: ''},
        // 禁用按钮,false为开启，True为关闭
        noAuthority: true,
        // 用户id和角色id      
        roleIds : ""
      }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.gridData.splice(this.index)
          })
          .catch(_ => {});
      },
      // 查链函数
      queryChain: function() {
        let params = {
          key: this.filename,
        }
        API1.query_private(params).then(res => {
          console.log(res)
          if(res.code != 0){
            this.$message.error(res.msg)
          }else{
            res = res.msg
            console.log(res)
            const newline = {                
              name: res.name,
              size: res.size,
              uptime: res.uptime,
              owner: res.owner,
            }
            this.index++
            this.gridData.push(newline)
            this.dialogVisible=true 

          }
          
        })
        .catch(error => {
           console.log(error)
           
        })

      },
      
      // 根据用户权限，禁用按钮
      init() {

        API_USER.tokenUser().then(res => {
          
          // console.log(this.userId);  

          API_ROLE.findById(res.userId).then(res => {
          console.log(res[0]);
          
          if(res[0] == 1){
            this.noAuthority = false;
          }
          console.log(this.noAuthority);
          })
        
        })        
      },     
    },
    mounted() {   
      this.init();
    }
  }
</script>

<style scoped>
</style>
